<template>
    <div>
        <el-row :gutter="10">
            <el-col :xs="24" :sm="6">
                <div class="header-left">
                    <el-card class="first">
                        <el-row :gutter="10">
                            <el-col :xs="24" class="product">
                                <div>
                                    <el-icon :size="50" color="#4FC0B9">
                                        <Grid />
                                    </el-icon>
                                </div>
                                <div class="product-number">
                                    <span>商品数量</span>
                                    <span>{{ goodsNumber }}</span>
                                </div>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-card>
                        <el-row :gutter="10">
                            <el-col :xs="24" class="product">
                                <div>
                                    <el-icon :size="50" color="#5698CB">
                                        <Comment />
                                    </el-icon>
                                </div>
                                <div class="product-number">
                                    <span>未发货单</span>
                                    <span>{{ waitStockNumber }}</span>
                                </div>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>
            </el-col>
            <el-col :xs="24" :sm="18">
                <div id="orderChart" class="chart" style="height: 350px;padding:20px;"></div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :xs="24" :sm="10">
                <div id="sumChart" class="chart" style="height:400px;"></div>
            </el-col>
            <el-col :xs="24" :sm="14">
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="12">
                        <div id="areaChart" class="chart" style="height: 400px;" />
                    </el-col>
                    <el-col :xs="24" :sm="12">
                        <div id="channelChart" class="chart" style="height: 400px;" />
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts">
import { post } from '@/utils/http';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { Grid, Comment } from '@element-plus/icons-vue';
import * as echarts from 'echarts'


const goodsNumber = ref(0)
const waitStockNumber = ref(0)
let orderChart: echarts.ECharts | undefined = undefined
let sumChart: echarts.ECharts | undefined = undefined
let areaChart: echarts.ECharts | undefined = undefined
let channelChart: echarts.ECharts | undefined = undefined
onMounted(() => {
    getDashboard()
})
/**
 * 获取数据
 */
function getDashboard() {
    const data = { _gp: 'admin.dashboard', _mt: 'integral' }
    post(data).then(res => {
        console.log(res.data.goodsNumber)
        const { data, errno, errmsg } = res
        console.log(data)
        if (200 == errno) {
            goodsNumber.value = data.goodsCount
            waitStockNumber.value = data.waitStockCount
            orderChart = echarts.init(document.getElementById('orderChart') as HTMLElement)
            sumChart = echarts.init(document.getElementById('sumChart') as HTMLElement)
            areaChart = echarts.init(document.getElementById('areaChart') as HTMLElement)
            channelChart = echarts.init(document.getElementById('channelChart') as HTMLElement)
            orderChart.setOption({
                title: { text: '7日订单' },
                legend: {
                    data: ['订单数'],
                    right: 1
                },
                xAxis: {
                    name: '订单数',
                    type: 'category',
                    data: data.daysOrder[0]
                },
                yAxis: {
                    name: '订单数',
                    type: 'value',
                    axisTick: {
                        color: '#666',
                        fontSize: 12
                    }
                },
                series: [
                    {
                        name: '订单数',
                        data: data.daysOrder[1],
                        type: 'bar',
                        color: "#00B5FF",
                        barWidth: 30
                    }
                ]
            });
            sumChart.setOption({
                title: { text: '7日成交金额' },
                legend: {
                    data: ['订单数'],
                    name: '订单数',
                    right: 1
                },
                xAxis: {
                    type: 'category',
                    name: '订单数',
                    data: data.daysSum[0]
                },
                yAxis: {
                    type: 'value',
                    name: '订单数',
                },
                series: [
                    {
                        data: data.daysSum[1],
                        name: '订单数',
                        type: 'line',
                        color: '#9DD0C9'
                    }
                ]
            })
            areaChart.setOption({
                title: {
                    text: '订单地区分布',
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    data: ["地区分布"],
                    right: 1
                },
                series: [
                    {
                        name: '地区分布',
                        type: 'pie',
                        radius: '50%',
                        data: data.area,

                    }
                ]
            })
            channelChart.setOption({
                title: {
                    text: '订单渠道分布',
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    data: ["渠道分布"],
                    right: 1
                },
                series: [
                    {
                        name: '渠道分布',
                        type: 'pie',
                        radius: '50%',
                        data: data.channel,

                    }
                ]
            })
        } else {
            ElMessage.error(errmsg)
        }
    })
}

</script>
<style lang="less" scoped>
.header-left {
    width: 100%;

    .first {
        margin: 40px 0;
    }

    .product {
        display: flex;
        justify-content: space-between;
    }

    .product-number {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
    }
}
</style>